<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:useBean id="user" class="com.hebxy.ssm.entity.User" scope="request"></jsp:useBean>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>哈移动大厅 - 用户登录</title>
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<style>
    body {
        background: linear-gradient(135deg, #1a73e8 0%, #0984e3 100%);
        min-height: 100vh;
        position: relative;
    }
    .video-container {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100vw;
    	height: 100vh;
    	overflow: hidden;        /* 启用溢出裁剪 :ml-citation{ref="3" data="citationList"} */
   	 	z-index: 0;              /* 提升层级 :ml-citation{ref="6" data="citationList"} */
    	/* 移除flex布局 */
		}

	.bg-video {
    	width: 100%;             /* 替代min-width :ml-citation{ref="3" data="citationList"} */
    	height: 100%;
    	object-fit: cover;       /* 填充容器区域 :ml-citation{ref="1,3" data="citationList"} */
	    position: absolute;
	    top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
	}

	 #bgVideo {
   	 	object-fit: cover;
    	opacity: 1; /* 透明度调节 */
    	filter: brightness(1); /* 亮度调节 */
	} 
    
    .login-wrapper {
    	position: relative; /* 改为relative定位 */
    	min-height: 100vh;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	padding: 2rem; /* 增加安全边距 */
    	z-index: 999; /* 提升层级 */
}
    
    .login-card {
    	background: rgba(255, 255, 255, 0.1); /* 降低不透明度 */
    	backdrop-filter: none; /* 毛玻璃效果 */
    	border: 1px solid rgba(255, 255, 255, 0.3); /* 浅色边框 */
   		border-radius: 16px;
    	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 柔和阴影 */
    	width: 420px; /* 适当缩小宽度 */
    	padding: 35px; /* 调整内边距 */
    	position: relative; /* 相对定位 */
   		transition: all 0.4s ease; /* 增加过渡动画 */
    	transform: translateY(0); /* 移除原translateY */
	}

	/* 增加悬浮动效 */
	.login-card:hover {
    	transform: translateY(-5px);
   	 	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
	}
    
    .logo-container {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	gap: 15px; /* 图标文字间距 */
    	margin-bottom: 2rem;
}

	.logo {
    	width: 50px; /* 固定尺寸 */
    	height: 50px;
    	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); /* 投影效果 */
	}

	.logo-text {
    	font-size: 28px;
    	color: #1a73e8; /* 与主题色统一 */
   		font-weight: 600;
    	letter-spacing: 1px; /* 字间距 */
    	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
    
    .form-floating label {
    	color: #4a5568; /* 深灰色提升可读性 */
    	font-size: 15px;
	}
    
    .form-control {
        border-radius: 10px;
        padding: lrem;
       	background: rgba(255, 255, 255, 0.9);
    }
    
    .form-control:focus {
        border-color: #1a73e8;
        box-shadow: none;
    }
    
    .submit-btn {
    	background: linear-gradient(135deg, #B32222, #FFEF61); /* 渐变按钮 */
    	box-shadow: 0 4px 6px rgba(26, 115, 232, 0.2);
    	margin: 1.5rem auto 0;  /* 修改此处 */
    	display: block;         /* 新增 */
    	width: fit-content;     /* 按内容宽度自适应 */
    	
	}
    
    .submit-btn:hover {
        background: #FFEF61;
        transform: translateY(-2px);
    }
    
    .error {
        color: #ff4444;
        font-size: 13px;
        margin-top: 5px;
    }
    
    .register-link {
        color: #1a73e8;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s;
    }
    
    .register-link:hover {
        color: #1557b0;
    }
</style>
</head>
<body>
	<!-- 新增视频容器 -->
	<div class="video-container">
    	<video autoplay muted loop class="bg-video">
        	<source src="${pageContext.request.contextPath}/static/media/login_bj.mp4" type="video/mp4">
    	</video>
	</div>

    <div class="login-wrapper">
        <div class="login-card">
        	<div class="logo-container">
        		<img src="${pageContext.request.contextPath }/static/image/login_log.jpg" class="logo" alt="哈移动大厅">
        		<span class="logo-text">哈移动大厅</span>
        	</div>
            <c:if test="${not empty msg}">
                <div class="alert alert-warning alert-dismissible fade show">
                    ${msg}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            </c:if>

            <form:form modelAttribute="user" action="${pageContext.request.contextPath}/user/userLogin" method="POST">
                <div class="form-floating mb-4">
                    <form:input path="card_number" class="form-control" placeholder="卡号"/>
                    <label for="card_number">卡号</label>
                    <form:errors path="card_number" class="error"/>
                </div>

                <div class="form-floating mb-4">
                    <form:input path="password" type="password" class="form-control" placeholder="密码"/>
                    <label for="password">密码</label>
                </div>

                <button type="submit" class="submit-btn" onclick="return confirm('确认登录吗？')">
                    立即登录
                </button>

                <div class="text-center mt-4">
                    <a href="${pageContext.request.contextPath}/user/userRegister" class="register-link">
                        立即注册 >>
                    </a>
                </div>
            </form:form>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
